<template>
  <div>
    <el-row>
      <el-button type="success" plain @click="addNewUser">新增用户</el-button>
    </el-row>

    <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        prop="userId"
        label="用户编号"
        width="80">
      </el-table-column>

      <el-table-column
        prop="userName"
        label="姓名"
        width="180">
      </el-table-column>

      <el-table-column prop="userAvater" label="头像" width="180">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.userAvater"></el-avatar>
        </template>
      </el-table-column>

      <el-table-column
        prop="userGender"
        label="性别">
      </el-table-column>

      <el-table-column
        prop="userEmail"
        label="邮箱">
      </el-table-column>

      <el-table-column
        prop="userAddress"
        label="地址">
      </el-table-column>

      <el-table-column
        align="right">
<!--        <template slot="header" slot-scope="scope">-->
<!--          <el-input-->
<!--            v-model="search"-->
<!--            size="mini"-->
<!--            placeholder="输入关键字搜索"/>-->
<!--        </template>-->
        <template slot-scope="scope">

          <el-button
            size="mini"
            type="primary"
            @click="editUser(scope.row.userId)">编辑用户
          </el-button>

          <el-button
            size="mini"
            type="danger"
            @click="userDetail(scope.row.userId)">查看详情
          </el-button>

          <!--          <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">-->
          <!--            查看详情-->
          <!--          </el-button>-->

        </template>
      </el-table-column>

    </el-table>

<!--    用户详情抽屉-->
    <el-drawer
      title="用户详情"
      :visible.sync="drawer"
      :with-header="true">
      <div>
        <span>用户编号：{{detailData.userId}}</span>
        <el-divider></el-divider>
        <span>用户名：{{detailData.userName}}</span>
        <el-divider></el-divider>
        <span>性别：{{detailData.userGender}}</span>
        <el-divider></el-divider>
        <span>邮箱：{{detailData.userEmail}}</span>
        <el-divider></el-divider>
        <span>头像：<el-avatar shape="square" :size="100" :src="detailData.userAvater"></el-avatar></span>
        <el-divider></el-divider>
        <span>地址：{{detailData.userAddress}}</span>
        <el-divider></el-divider>
        <span>描述：{{detailData.userDescription}}</span>
        <el-divider></el-divider>
        <span>是否会员：{{detailData.userVip}}</span>
        <el-divider></el-divider>
        <span>听歌量：{{detailData.userListenQuantity}}</span>
        <el-divider></el-divider>
        <span>创建时间：{{detailData.userCreateTime}}</span>
      </div>
    </el-drawer>

<!--编辑用户抽屉-->
    <el-drawer
      title="用户编辑"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      class="el-drawer__body"
    >
      <div class="demo-drawer__content">
        <el-form :model="detailData">
          <el-form-item label="用户编号" :label-width="formLabelWidth">
            <el-input v-model="detailData.userId" autocomplete="off" disabled></el-input>
          </el-form-item>

          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="detailData.userName" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-radio v-model="detailData.userGender" label="男">男</el-radio>
            <el-radio v-model="detailData.userGender" label="女">女</el-radio>
          </el-form-item>

          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="detailData.userEmail" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="detailData.userAvater" :src="detailData.userAvater" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="detailData.userAddress" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input v-model="detailData.userDescription" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="是否会员" :label-width="formLabelWidth">
            <el-select v-model="detailData.userVip" placeholder="是否会员">
              <el-option label="会员" value="会员"></el-option>
              <el-option label="非会员" value="非会员"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="听歌量" :label-width="formLabelWidth">
            <el-input v-model="detailData.userListenQuantity" autocomplete="off"></el-input>
          </el-form-item>

<!--          <el-form-item label="创建时间" :label-width="formLabelWidth">-->
<!--            <el-date-picker-->
<!--              v-model="detailData.userCreateTime"-->
<!--              type="datetime"-->
<!--              placeholder="选择日期时间">-->
<!--            </el-date-picker>-->
<!--          </el-form-item>-->


        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="submitEditUser" :loading="loading">
            {{ loading ? '提交中 ...' : '确定' }}
          </el-button>
        </div>
      </div>
    </el-drawer>
<!--新增用户表单-->
    <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
      <el-form :model="submitData">
<!--        <el-form-item label="用户编号" :label-width="formLabelWidth">-->
<!--          <el-input v-model="submitData.userId" autocomplete="off" disabled></el-input>-->
<!--        </el-form-item>-->

        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="submitData.userName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio v-model="submitData.userGender" label="男">男</el-radio>
          <el-radio v-model="submitData.userGender" label="女">女</el-radio>
        </el-form-item>

        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="submitData.userEmail" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:8100/avaterUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess2"
            :before-upload="beforeAvatarUpload2">
            <img v-if="submitData.userAvater" :src="submitData.userAvater" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="submitData.userAddress" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="submitData.userDescription" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="是否会员" :label-width="formLabelWidth">
          <el-select v-model="submitData.userVip" placeholder="是否会员">
            <el-option label="会员" value="会员"></el-option>
            <el-option label="非会员" value="非会员"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="听歌量" :label-width="formLabelWidth">
          <el-input v-model="submitData.userListenQuantity" autocomplete="off"></el-input>
        </el-form-item>

<!--        <el-form-item label="创建时间" :label-width="formLabelWidth">-->
<!--          <el-date-picker-->
<!--            v-model="submitData.userCreateTime"-->
<!--            type="datetime"-->
<!--            format="yyyy-MM-dd HH:mm:ss"-->
<!--            placeholder="选择日期时间">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitToCreateUser">确 定</el-button>
      </div>

    </el-dialog>

  </div>

</template>

<script>
  import axios from 'axios'

  export default {
    name: "User",
    data() {
      return {
        tableData: [{
          userId: '',
          userName: '',
          userGender: '',
          userEmail: '',
          userAvater: '',
          userAddress: '',
          userDescription: "",
          userVip: '',
          userListenQuantity: '',
          userCreateTime: '',
        }],
        drawer: false,
        dialog: false,
        loading: false,
        formLabelWidth: '80px',
        timer: null,
        dialogFormVisible: false,

        detailData: {
          userId: '',
          userName: '',
          userGender: '',
          userEmail: '',
          userAvater: '',
          userAddress: '',
          userDescription: "",
          userVip: '',
          userListenQuantity: '',
          userCreateTime: ''
        },
        submitData: {
          userId: Number,
          userName: '',
          userGender: '',
          userEmail: '',
          userAvater: '',
          userAddress: '',
          userDescription: "",
          userVip: '',
          // userListenQuantity: Number,
          // userCreateTime: ''
        },
      }
    },
    mounted() {
      this.findUserListByPage()
    },
    methods: {
      findUserListByPage() {
        axios.get('http://127.0.0.1:8100/findUserListByPage/1/10').then(res => {
          this.tableData = res.data.list
        })
      },
      userDetail(userId) {
        this.drawer = true;
        axios.get('http://127.0.0.1:8100/findByUserId/' + userId).then(res => {
          this.detailData = res.data
        })
      },
      editUser(userId) {
        this.dialog = true;
        axios.get('http://127.0.0.1:8100/findByUserId/' + userId).then(res => {
          this.detailData = res.data
        })
      },
      submitEditUser() {

        axios.post('http://127.0.0.1:8100/updateUser',this.detailData).then(res => {
          if(res.data=='success'){
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            // this.$refs.drawer.closeDrawer()
            this.cancelForm()
            this.$router.go(0)
          }else{
            this.$message.error('修改失败');
          }
        })
      },
      handleClose(done) {
        if (this.loading) {
          return;
        }
        this.$confirm('确定要提交表单吗？')
          .then(_ => {
            this.loading = true;
            this.timer = setTimeout(() => {
              done();
              // 动画关闭需要一定的时间
              setTimeout(() => {
                this.loading = false;
              }, 400);
            }, 2000);
          })
          .catch(_ => {
          });
      },
      cancelForm() {
        this.loading = false;
        this.dialog = false;
        clearTimeout(this.timer);
      },

      handleAvatarSuccess(res, file) {
        this.detailData.userAvater = URL.createObjectURL(file.raw);
      },

      handleAvatarSuccess2(res, file) {
        this.submitData.userAvater = URL.createObjectURL(file.raw);
      },


      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传商铺图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传商铺图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

      // exits: function () {
      //   this.$router.push("/ShopIndex/");
      // },

      beforeAvatarUpload2(file) {

        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传商铺图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传商铺图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

      addNewUser(){
        this.dialogFormVisible = true
        this.submitData.userAvater=''
      },

      submitToCreateUser(){
        this.dialogFormVisible = false
        axios.post('http://127.0.0.1:8100/insertUser',this.submitData).then(res=>{
            if(res.data=='success'){
              this.$message({
                message: '添加成功',
                type: 'success'
              });
            }else{
              this.$message.error('添加失败');
            }
        })

      }


    }
  }
</script>

<style>
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 78px;
  }

  .avatar-uploader :hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
  }

  .avatar {
    width: 78px;
    height: 78px;
    display: block;
  }


  .el-drawer__body {
    overflow: auto;
    /* overflow-x: auto; */
  }


</style>


